<!-- 首页 -->
<template>
  <div class="home-box">
    <!-- 相对定位中国移动图标 -->
    <div class="china-mobile-img">
      <img :src="chinaMobileLogo" />
    </div>
    <div class="child-system-box">
      <!-- 头部位置 -->
      <div class="header-box">
        <div class="header-child-box">
          <div class="header-logo">
            <!-- <img :src="logo" /> -->
            <div class="fengexian"></div>
            <div class="home-header-title">
              <div class="" style="font-size: 26px;color: #34a02c;font-weight: 700;letter-spacing: 2px;margin-bottom: 5px;">菲律宾myjob</div>
              <div class="">philippinesmjob_web</div>
            </div>
            <!-- <div>
              <img :src="image1" />
            </div> -->
            <!-- <img :src="chinaMobileLogo"  class="china-mobile-img" /> -->
          </div>
          <div class="header-logout">
            <div class="header-logout-icon">
              <img :src="overview" @click="showViewDialog" />
              <img :src="message" />
              <img :src="home_help_icon" />
              <img :src="home_uinfo_icon" />
              <el-dropdown trigger="click">
                <img :src="avatar" class="header-avatar" />
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <!-- 子系统列表 -->
      <div class="subsystem-list-boxs">
        <div class="subsystem-list-box" :style="height" v-loading="loading" element-loading-text="数据加载中...">
          <div :class="'subsystem'+((item.num==1||item.num==3)?1:2)" v-for="item in dataList" :key="item.subsystemId" @click="hrefPage(item)">
            <div class="subsystem-icon">
              <template v-if="item.num == 1">
                <img :src="item.subsystemImg ? item.subsystemImg : image1"  />
              </template>
              <template v-else-if="item.num == 2">
                <img :src="item.subsystemImg ? item.subsystemImg : image2"  />
              </template>
              <template v-else-if="item.num == 3">
                <img :src="item.subsystemImg ? item.subsystemImg : image4"  />
              </template>
              <template v-else-if="item.num == 4">
                <img :src="item.subsystemImg ? item.subsystemImg : image3"  />
              </template>
              <template v-if="item.num == 1 || item.num == 3">
                <img :src="image6" />
              </template>
              <template v-else>
                <img :src="image6" />
              </template>
            </div>
            <div class="subsystem-title">{{item.subsystemName}}</div>
          </div>
        </div>
      </div>
      <!-- <div class="child-system-list">
        <div class="child-list-div">
          <div class="" title="">
            <div class="home-list-icon">
              <img src="" class="image_one" />
              <img src="" class="image_two" />
            </div>
            <div class="image_title"></div>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 概览海康窗口界面 -->
    <el-dialog class="home-dialog" :visible.sync="open" width="100%"
     :show-close="false" :close-on-click-modal="false" append-to-body>
      <div slot="title" class="dialog-title">
        <i><img :src="gailanIcon" /></i>
        <span class="title-text">概览</span>
        <div class="button-right" style="float: right;">
          <span class="title-close" style="cursor: pointer;" @click="cancel"><img :src="closeIcon" /></span>
        </div>
      </div>
      <div class="" style="width: 100%; height: 100%;" v-loading="dialogLoading">
        <iframe :src="pathUrl" style="width: 100%; min-height: calc(100vh - 35px); border:0px; overflow-y: auto;"></iframe>
      </div>
    </el-dialog>
    <!-- 新增窗口界面 -->
    <!-- <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; width: 1366px; height: 768px;">
      <iframe :src="pathUrl" style="width: 100%; min-height: 100%; border:0px; overflow-y: auto;"></iframe>
    </div> -->
  </div>
</template>

<script>
// import settings from "@/settings"
import RightPanel from '@/components/RightPanel'
import { getSubsystemByUserId,checkSubsystemByUserId,getHaiKangApi } from '@/api/login'
import { getPrimaryMenu } from '@/api/menu'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from '@/layout/components'
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { mapState,mapGetters } from 'vuex'
import Cookies from "js-cookie";
import { isExternal } from '@/utils/validate'
import { getToken } from '@/utils/auth'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import router from '../router'
import screenfull from 'screenfull'

export default {
  name: 'Home',
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader,
      logoNum: state => state.settings.logoNum,
      title: state => state.settings.title
    }),
    ...mapGetters([
      'avatar'
    ]),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  watch: {
    isFullscreen(newValue, oldValue) {
      console.log(this.isFullscreen)
    }
  },
  data(){
    return{
      height: "height:"+((document.documentElement.clientHeight || document.body.clientHeight)-220)+"px;",
      isFullscreen: false,
      bigWidht: screen.width,
      bigHeight: screen.height,
      open: false,
      pathUrl: 'http://36.148.24.62:8500/GIS/MapInfo.html',
      dialogLoading: false,
      loading: false,
      //子系统菜单数据
      dataList: [],
      logo: require("@/assets/image/login_logo.png"),
      chinaMobileLogo: require("@/assets/image/china_mobile.png"),
      overview: require("@/assets/image/overview.png"),
      backHome: require("@/assets/image/backHome.png"),
      message: require("@/assets/image/message.png"),
      home_help_icon: require("@/assets/image/home_help_icon.png"),
      home_uinfo_icon: require("@/assets/image/home_uinfo_icon.png"),
      home_small_jt: require("@/assets/image/home_small_jt.png"),
      gailanIcon: require("@/assets/image/gailan_icon.png"),
      closeIcon: require("@/assets/image/close.png"),
      // image3: require("@/assets/image/home_small_fire.png"),
      // image4: require("@/assets/image/home_small_chong.png"),
      image1: require("@/assets/image/menhu.png"),
      image2: require("@/assets/image/notice.png"),
      image3: require("@/assets/image/fire.png"),
      image4: require("@/assets/image/chong.png"),
      image5: require("@/assets/image/jiantou1.png"),
      image6: require("@/assets/image/jiantou2.png"),
    }
  },
  beforeDestroy() {
    this.destroy()
  },
  mounted(){
    this.init()
    this.loading = true
    getSubsystemByUserId().then((res)=>{
      this.loading = false
      if(res.code == 200){
        this.dataList = res.userSubsystem
        if(this.dataList && this.dataList.length > 0){
          var num=0;
          for(var i=0;i<this.dataList.length>0;i++){
             num = (num + 1)
             num = num>4 ? 1 : num
             this.dataList[i]['num'] = num
          }
        }
      }
    })
  },
  methods: {
    change() {
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    },
    //取消弹框
    cancel () {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
      if (!screenfull.enabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.open = false
    },
    //概览展现
    showViewDialog(){
      this.open = true
      this.dialogLoading = true
      this.pathUrl = 'http://36.148.24.62:8500/GIS/MapInfo.html'
      this.dialogLoading = false
      if (!screenfull.enabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      // getHaiKangApi().then((res)=>{
      //   console.log(res)
      //   this.dialogLoading = false
      //   this.pathUrl = settings.videoUrl+'/bic/ssoService/v1/tokenLogin?token='+res.data.token+'&service='+settings.videoUrl+'/portal'
      // }).catch((e)=>{
      //   console.log(e)
      //   this.dialogLoading = false
      // })
    },
    //页面跳转
    hrefPage(item){
      var params = { subsystemId:item.subsystemId }
      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
      })
      checkSubsystemByUserId(params).then((res)=>{
        if(res.code == 200 && res.result == true){
          Cookies.set('subSystemLogoNum', item.num)
          Cookies.set('subSystemTitle', item.subsystemName)
          Cookies.set('subSystemLogo', item.subsystemImg)
          Cookies.set('sidebarStatus', 1)
          this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
          })
          if(isExternal(item.subsystemUrl)){
            console.log('11')
            if(item.subsystemName && item.subsystemName.indexOf('视频')>-1){
              getHaiKangApi().then((res)=>{
                var ress = JSON.parse(res.data)
                if(ress.code == "0"){
                  var str = ''
                  if(item.subsystemUrl){
                    str = item.subsystemUrl.replace(/token=/, 'token='+ress.data.token);
                  }
                  window.open(str, '_blank')
                }else{
                  this.msgError(ress.msg)
                }
              })
            }else{
              window.open(item.subsystemUrl+getToken()+'&subsystemId='+item.subsystemId, '_blank')
            }
          }else{
	          Cookies.set('hrefMenuType', 1)
            Cookies.set('subsystemId', item.subsystemId)
            if(item.openMenu == 1){
              console.log('22', item.subsystemUrl)
              this.$store.dispatch('GenerateRoutes', item).then(accessRoutes => {
              // 测试 默认静态页面
              // store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
                // 根据roles权限生成可访问的路由表
                router.addRoutes(accessRoutes) // 动态添加可访问路由表
              })
              this.$router.push({
                path: "/index"
              })
            } else {
              this.$router.push({
                path: '/primaryMenu'
              })
            }
          }
        }else{
          this.msgError('您当前没有该系统的访问权限')
        }
      })
    },
    //退出登录
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          Cookies.set('subsystemId', '')
          Cookies.set('sidebarStatus', 1)
          location.href = '/home';
        })
      })
    },
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";
  .home-box{
    height: 100%;
    background-image: url("../assets/image/home_bg.jpg");
    background-size: cover;
  }
  .header-box{
    // background-color: #4aa8e2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFF;
    padding: 0px 10px;
  }
  .header-child-box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 40px;
  }
  .header-box .header-logo{
    display: flex;
    align-items: center;
  }
  .header-box .header-logo img{
    width: 260px;
  }
  .china-mobile-img{
    position: absolute;
    right: 10%;
    bottom: 5%;
    z-index: 99;
    width: 150px;
    height: 45px;
  }
  .china-mobile-img img{
    width: 100%;
    height: 100%;
  }
  .header-box .header-logout{
  }
  .header-box .header-logout-icon{
    display: flex;
    align-items: center;
    float: right;
    margin-bottom: 20px;
  }
  .header-box .header-logout img{
    width: 20px;
    height: 20px;
    margin: 0px 15px;
    cursor: pointer;
  }
  .header-box .header-logout .header-avatar{
    border-radius: 12px;
    width: 30px;
    height: 30px;
  }
  .header-box .fengexian{
    width: 1px;
    background-color: #999;
    height: 45px;
    margin: 0px 25px;
  }
  .header-box .home-header-title{
    display: block;
    color: #666;
    font-size: 14px;
    text-align: left;
    // line-height: 26px;
    clear: both;
  }
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  // .fixed-header {
  //   position: fixed;
  //   top: 0;
  //   right: 0;
  //   z-index: 9;
  //   width: calc(100% - #{$sideBarWidth});
  //   transition: width 0.28s;
  // }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }

  .mobile .fixed-header {
    width: 100%;
  }

  .child-system-box{
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .child-system-box .child-system-list{
    width: 100%;
    overflow: hidden;
    margin: 20px 0px;
  }
  .child-system-box .child-system-list>div{
    width: 25%;
    float: left;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer
  }
  .child-system-box .child-system-list .child-list-div>div{
    width: 100%;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0px 10px;
    background-image: url("../assets/image/home_small_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 135px;
    position: relative;
  }
  .child-system-box .child-system-list .child-list-div .home-list-icon{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-top: 25px;
  }
  .child-system-box .child-system-list .child-list-div .home-list-icon .image_one{
    width: 26px;
    height: 26px;
  }
  .child-system-box .child-system-list .child-list-div .home-list-icon .image_two{
    width: 16px;
    height: 16px;
  }
  .child-system-box .child-system-list .child-list-div .image_title{
    margin-left: 10%;
    margin-top: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 80%
  }
  .subsystem-list-boxs{
    width: 950px;
    overflow: hidden;
    margin: 0 auto;
  }
  .subsystem-list-box{
    width: 970px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    overflow-y: auto;
  }
  .subsystem1{
    width: 200px;
    background-color: #479e26;
    height: 115px;
    margin-right: 30px;
    cursor: pointer;
    float: left;
    margin-bottom: 15px;
  }
  .subsystem1 .subsystem-icon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    padding: 15px 0px;
  }
  .subsystem1 .subsystem-icon img:first-child{
    width: 30px;
    height: 30px;
  }
  .subsystem1 .subsystem-icon img:last-child{
    width: 16px;
  }
  .subsystem1 .subsystem-title{
    color: #FFF;
    text-align: left;
    width: 80%;
    margin: 0 auto;
  }
  .subsystem2{
    width: 200px;
    background-color: #f9b700;
    height: 115px;
    margin-right: 30px;
    color: #FFF;
    cursor: pointer;
    float: left;
    margin-bottom: 15px;
  }
  .subsystem2 .subsystem-icon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    padding: 15px 0px;
  }
  .subsystem2 .subsystem-icon img:first-child{
    width: 30px;
    height: 30px;
  }
  .subsystem2 .subsystem-icon img:last-child{
    width: 16px;
  }
  .subsystem2 .subsystem-title{
    text-align: left;
    width: 80%;
    margin: 0 auto;
  }
  .home-dialog .dialog-title {
    text-align: left;
    font-size: 16px;
    // font-weight: 700;
    overflow: hidden;
    // display: flex;
  }
  .home-dialog .dialog-title i {
    color: #67C23A;
    vertical-align: sub;
    /* color: #0B2278; */
    // font-size: 16px;
    // line-height: 38px;
  }
  .home-dialog .dialog-title .title-text{
    margin-left: 5px;
  }
  .home-dialog .dialog-footer {
    text-align: left;
    font-size: 14px;
    font-weight: 700;
  }
</style>
